const { ProgressPlugin,ProvidePlugin } = require("webpack")
const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
//ProgessPlugin是webpack的内置插件
// const { ProgressPlugin } = require("webpack")

module.exports = {
    mode:"development",
    entry:{
        chunk: ["react","react-dom/client"],
        // app:path.resolve(__dirname,"../","src/main.js")
        app:{
          import: path.resolve(__dirname,"../","src/main.js"),
          dependOn:"chunk"
        }
    },
    output:{
        path:path.resolve(__dirname,"../","dist"),
        filename:"js/[name].[chunkhash:8].js",
        clean:true,//每次build打包时，自动删除之前的文件

    },
    plugins:[
        new HtmlWebpackPlugin({
            // template:'./public/index.html'
            //配置了template，是用来指定页面的位置，可以使用绝对路径
            template:path.resolve(__dirname,"../","public/index.html"),
            inject:"body",//把js脚本注入body标签结束内之前
            filename:"index.html",//指定打包成功后的页面名字
            title:"vue-element-admin",//用来指定页面中的title标题
            favicon:path.resolve(__dirname,"../","public/favicon.ico")
        }),
        new ProgressPlugin({
            handler(percentage,message,...args){
                if(percentage ==1) {
                    console.log("100% 打包/启动成功");
                }else{
                    console.log(`${Math.floor(percentage * 100)}%正在打包(编译)...`);
                    
                }  
            }
        }),
        new ProvidePlugin({
            React:path.resolve(__dirname,"../","node_modules/react/index.js")
        })
    ],
    // module模块  在webpack中一切皆模块
    module:{
        rules: [
            {test: /\.(js|jsx|ts|tsx)$/, use:"babel-loader",exclude:/node_modules/ },
            // {test: /\.css$/, use:["babel-loader","css-loader"] }
            {test: /\.(css|scss)$/, use:["style-loader","css-loader","sass-loader"] },
            // {test: /\.(png|jpg|svg|gif|jpeg|webp)$/, use:"file-loader" },
            // {test: /\.(png|jpg|svg|gif|jpeg|webp)$/, use:"url-loader" },
            // webpack5
            {
                test:/\.(png|jpg|svg|gif|jpeg|webp)$/, type:"asset/resource",
                generator: {
                    filename:'img/[name].[contenthash:8][ext]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            // 配置解析src路径
            "@": path.resolve(__dirname, "../", "src")
        },
        // 配置允许省略哪些后缀
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
    }
}